<template>
  <div class="container">
    <div class="content-announcement"></div>
    <div class="content-message-body">
      <div class="student">
        <i class="iconfont icon-group"></i>
        <span>学生人数：576</span>
        <span>选题人数：576</span>
        <span>未选题人数：0</span>
      </div>
    </div>
    <div class="content-message-body">
      <!-- 信息栏头部 -->
      <div class="body-header">
        <label>进度</label>
        <label>所属组织：</label>
        <treeSelect
          ref="selectTreeRef"
          :props="defaultProps"
          :options="treeData"
          :value="valueId"
          :clearable="true"
          :accordion="true"
          @getValue="getValue($event)"
          style="width: 320px"
        />
        <div class="right">
          <span><i></i>已结束</span>
          <span><i></i>进行中</span>
          <span><i></i>未开始</span>
        </div>
      </div>

      <!-- 列表栏 -->

      <div
        class="content-schedule-list"
        v-for="(_, index) of 5"
        :key="index"
        :class="scheduleList[index]"
      >
        <span>未开始人数：0</span>
        <span>进行中人数：0</span>
        <span>完成人数：0</span>
        <span>0%</span>
        <span>查看过程时间</span>
      </div>
    </div>
  </div>
</template>

<script>
import treeSelect from '@/components/Function/treeSelect.vue';

export default {
  name: 'firstPage',

  data() {
    return {
      // 树状数据中，选定子元素名，展示名，选中值变量名
      defaultProps: {
        children: 'list',
        label: 'name',
        value: 'id',
      },
      // 树状数据
      treeData: [
        {
          id: '1',
          name: '佛山科学技术学院',
          list: [
            {
              id: '1-1',
              name: '电子信息工程学院',
              list: [
                { id: '1-1-1', name: '物联网工程' },
                { id: '1-1-2', name: '网络工程' },
                { id: '1-1-3', name: '计算机科学与技术' },
                { id: '1-1-4', name: '计算机科学与技术(人工智能方向)' },
                { id: '1-1-5', name: '计算机科学与技术(第二学位)' },
                { id: '1-1-6', name: '电子信息工程' },
              ],
            },
          ],
        },
      ],

      // 初始展开
      valueId: '',

      // 列表
      scheduleList: ['one', 'two', 'three', 'four', 'five'],
    };
  },
  components: {
    treeSelect,
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 960px) {
  .body-header {
    margin-bottom: 40px;
  }
}

.container {
  padding: 30px 20px 0;

  .content-announcement,
  .content-message-body {
    position: relative;
    width: 100%;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 10px 15px;
  }

  .content-announcement {
    height: 20px;
  }

  .content-message-body:nth-child(2) {
    height: 120px;

    .student {
      position: absolute;
      background-color: #ff5722;
      border-radius: 4px;
      height: 80px;
      width: 400px;
      padding: 10px;
      color: #ffffff;

      i {
        float: left;
        font-size: 60px;
        margin: 10px;
      }

      span {
        float: left;
        font-weight: bold;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }

      span:nth-child(2) {
        padding-top: 10px;
        width: 320px;
      }

      span:nth-child(3),
      span:nth-child(4) {
        padding-bottom: 10px;
        width: 160px;
      }
    }
  }

  .content-message-body:nth-child(3) {
    height: 260px;

    // 首页信息栏头部
    .body-header {
      height: 38px;
      width: 100%;

      label {
        float: left;
        padding: 9px 15px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
        font-size: 14px;
        color: #676a6c;
      }

      .right {
        height: 100%;
        line-height: 38px;
        float: right;
        text-align: end;

        span {
          position: relative;
          float: left;
          color: #676a6c;
          font-size: 14px;
          width: 70px;
          height: 100%;

          i {
            position: absolute;
            height: 18px;
            width: 10px;
            left: 0;
            top: 10px;
            margin-left: 10px;
            border-radius: 2px;
          }
        }

        span:nth-child(1) i {
          background-color: #009688;
        }

        span:nth-child(2) i {
          background-color: #ffb800;
        }

        span:nth-child(3) i {
          background-color: #cccccc;
        }
      }
    }

    .content-schedule-list {
      height: 180px;
      width: 145px;
      border: 1px solid #eeeeee;
      float: left;
      margin: 10px;
      font-size: 14px;
      color: #676a6c;
      background-color: #ffffff;

      &::before {
        display: block;
        content: '';
        height: 30px;
        line-height: 30px;
        background-color: #ffb800;
        color: #ffffff;
        font-weight: 700;
        text-align: center;
      }

      span {
        float: left;
        width: 100%;
        text-align: center;
        margin-top: 10px;
      }

      span:nth-child(4) {
        color: #ff5722;
      }

      span:nth-child(5) {
        color: #1e9fff;
      }

      span:nth-child(4),
      span:nth-child(5) {
        font-weight: 700;
      }
    }

    .one::before {
      content: '任务书';
    }

    .two::before {
      content: '开题报告';
    }

    .three::before {
      content: '草稿';
    }

    .four::before {
      content: '定稿';
    }

    .five::before {
      content: '最终稿';
    }
  }
}
</style>
